<template>
  <div class="vt-checkbox flx-lm" @click="onCheck">
    <div class="flx-mm" :class="checked ? 'vt-check-icon': 'vt-uncheck-icon'">
      <i class="fa fa-check" aria-hidden="true" />
    </div>
    <div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    model: {
      prop: 'checked',
      event: 'check-box'
    },
    props: {
      checked: {
        type: Boolean,
        default(){
          return false
        }
      }
    },
    methods: {
      onCheck(){
        this.$emit('check-box', !this.checked)
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import './index.styl'
</style>
